.wok-ui-checkbox {
  display: inline-block;
  vertical-align: middle;
  height: 1rem;
  width: 1rem;
  border-radius: 0.25em;
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid var(--color-border);
  margin: 0;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
  }

  &:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: #e9ecef;
    pointer-events: none;
    opacity: .5;
  }
}